;(function () {

    const template = `    <!--科技栏目-->
        <div>
        <ul >
            <li v-for="tech in techArr" :key="tech.id">
                <span>{{tech.title}}</span>
                <button class="btn btn-default btn-xs" @click="pushTech(tech.id)">查看(Push)</button>&nbsp;
                <button class="btn btn-default btn-xs" @click="replaceTech(tech.id)">查看(replace)</button>
            </li>
         
        </ul>
        <button @click="$router.back()" >后退</button>
        <!--详情-->
        
        <router-view></router-view>
      
      </div>`;

    window.Tech = {
        template,
        data() {
            return {
                techArr: []
            };
        },
        created() {
            this.getTechArr();
        },
        methods: {
            getTechArr() {
                axios.get("http://localhost:63342/vue-mxg/vue-08-router/02-bootstrap-ajax-router/tech.json").then(item => {
                    this.techArr = item.data;
                }).catch(error => {
                    console.log(error.message)
                });
            },
            pushTech(id) {

                // 可以回退，
                this.$router.push(`/news/tech/detail/${id}`)
            },
            replaceTech(id) {
                this.$router.replace(`/news/tech/detail/${id}`);
            }
        }
    }
})();
